import { storeToRefs } from "pinia";
import { useGlobalStore } from "@/stores/modules/global";
import type { ScrollbarConfig } from "@/stores/interface";

/**
 * @description 滚动条配置 hooks
 */
export const useScrollbar = () => {
  const globalStore = useGlobalStore();
  const { scrollbarConfig } = storeToRefs(globalStore);

  // 更新滚动条CSS变量
  const updateScrollbarCSS = (config: ScrollbarConfig) => {
    document.documentElement.style.setProperty("--scrollbar-width", `${config.width}px`);
    document.documentElement.style.setProperty("--scrollbar-height", `${config.height}px`);
  };

  // 设置滚动条配置
  const setScrollbarConfig = (config: Partial<ScrollbarConfig>) => {
    const newConfig = { ...scrollbarConfig.value, ...config };
    globalStore.setGlobalState("scrollbarConfig", newConfig);
    updateScrollbarCSS(newConfig);
  };

  // 重置滚动条配置为默认值
  const resetScrollbarConfig = () => {
    const defaultConfig: ScrollbarConfig = { width: 8, height: 8 };
    setScrollbarConfig(defaultConfig);
  };

  // 初始化滚动条样式
  const initScrollbar = () => {
    updateScrollbarCSS(scrollbarConfig.value);
  };

  return {
    scrollbarConfig,
    setScrollbarConfig,
    resetScrollbarConfig,
    initScrollbar,
    updateScrollbarCSS
  };
};
